<template>
	<view class="fixedTb" :style="{...modeStyle}">
		<slot />
	</view>
	<view class="placeholder" v-if="props.placeholder" :style="{'height':boxHeight}" />
</template>

<script setup>
	import { logs } from "@/common/func.js"
	import { onLoad, onShow } from "@dcloudio/uni-app"
	import { ref, nextTick, computed, getCurrentInstance } from 'vue'
	const { proxy } = getCurrentInstance()
	let props = defineProps({
		placeholder: {
			type: Boolean,
			default: true
		},
		mode: {
			type: String,
			default: 'top'
		}
	})
	let boxHeight = ref('38px')
	let modeStyle = computed(() => {
		if (props.mode == 'top') {
			return {
				top: 0
			}
		} else {
			return {
				bottom: 0
			}
		}

	})

	nextTick(() => {
		const query = uni.createSelectorQuery().in(proxy);
		query.select('.fixedTb').boundingClientRect(data => {
			boxHeight.value = `${data.height}px`
		}).exec();
	})
</script>
<style lang="scss" scoped>
	.fixedTb {
		position: fixed;
		left: 0;
		width: 100%;
	}
</style>
